<template>
    <div>
      <!-- 列表组件 -->
      <el-table :data="catelist" border style="width: 100%"  row-key="id"   default-expand-all :tree-props="{children: 'children'}">
        <el-table-column prop="id" label="分类编号" width="180">
        </el-table-column>
        <el-table-column prop="catename" label="分类名称" width="180">
        </el-table-column>
        <el-table-column label="图片">
        <template slot-scope="item">
          <div>
            <img class="imgUrl" v-if="item.row.img" :src="item.row.img" alt="">
          </div>
        </template>
          </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="item">
            <div>
              <span v-if="item.row.status == 1">正常</span>
              <span v-else>禁用</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="item">
            <div>
              <el-button
                class="btnInfo"
                type="primary"
                icon="el-icon-edit"
                size="mini"
                circle
                @click="edit(item.row.id)"
              ></el-button>
              <el-button
                class="btnInfo"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                circle
                @click="del(item.row.id)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  //引入辅助性函数
  import { mapGetters, mapActions } from "vuex";
  //引入你封装好的接口
  import { cateDel } from "../../request/api";
  export default {
    computed: {
      ...mapGetters({
        catelist:'cate/getCteList'
      })
    },
    mounted() {
      this.getCate()
    },
    methods: {
      ...mapActions({
        getCate:'cate/changeCateAction'
      }),
      //点击编辑按钮事件
      edit(id) {
        this.$emit("edit", id);
      },
      //封装一个删除事件
      del(id) {
        this.$confirm("你确定要删除这条数据吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            cateDel({
              id
            })
            .then(res=>{
              if(res.code==200){
                this.$message.success(res.msg)
                this.getCate()
              }else{
                this.$message.error(res.msg)
                }
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
    },
  };
  </script>
  
  
  <style scoped>
  .imgUrl{
    width: 120px;
    height: 120px;
  }
  </style>
  